<!DOCTYPE html>
	<!-- 添加课程 -->
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加新课程</title>
    <link rel="stylesheet" href="css/addcourse.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="add-course-page">
        <!-- 顶部返回 -->
        <div class="back-nav">
            <a href="classroomsystem.html" class="back-link">← 添加新课程</a>
        </div>

        <div class="content-wrapper">
            <!-- 基本信息 -->
            <div class="card">
                <h3 class="card-title">基本信息</h3>
                <div class="form-group">
                    <label>课程名称</label>
                    <input type="text" placeholder="请输入课程名称">
                </div>

                <div class="form-group">
                    <label>课程难度</label>
                    <select id="courseLevel">
                        <option value="初级">初级</option>
                        <option value="中级">中级</option>
                        <option value="高级">高级</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>课程方向</label>
                    <select id="courseDirection">
                        <option value="没方向">没方向</option>
                        <option value="前端">前端</option>
                        <option value="后端">后端</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>课程学科</label>
                    <select id="courseSubject">
                        <option value="高级">高级</option>
                        <option value="初级">初级</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>课程封面</label>
                    <div class="upload-area" id="uploadArea">
                        <!-- 文件输入框 -->
                        <input type="file" id="imageUpload" accept="image/jpeg,image/png,image/gif"
                            style="display: none;">

                        <!-- 上传提示区域 -->
                        <div class="upload-content" id="uploadContent">
                            <img src="upload-icon.png" class="upload-icon" alt="上传图标">
                            <div class="upload-text">上传图片</div>
                            <div class="upload-desc">支持格式：PNG, JPG, GIF 等，最大 2MB</div>
                        </div>

                        <!-- 预览区域 -->
                        <div class="preview-content" id="previewContent" style="display: none;">
                            <img id="previewImage" src="" alt="预览图片">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 课程详情 -->
            <div class="card">
                <h3 class="card-title">课程详情</h3>
                <div class="form-group">
                    <label>课程详细介绍</label>
                    <div class="editor-toolbar">
                        <button>B</button>
                        <button><i>I</i></button>
                        <button><u>U</u></button>
                        <button>≡</button>
                    </select>
                    <textarea placeholder="请输入课程详细介绍"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group half">
                        <label>课程时长（小时）</label>
                        <input type="text" placeholder="请输入课程时长">
                    </div>
                    <div class="form-group half">
                        <label>难度级别</label>
                        <select>
                            <option value="">入门</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 价格设置 -->
            <div class="card">
                <h3 class="card-title">价格设置</h3>
                <div class="form-group">
                    <label>课程价格（元）</label>
                    <input type="text" placeholder="请输入课程价格">
                </div>
            </div>

            <!-- 课程大纲 -->
            <div class="card">
                <h3 class="card-title">课程大纲</h3>
                <button class="add-chapter-btn" id="addChapter">+ 添加章节</button>
                <div class="chapter-list" id="chapterList">
                    <div class="chapter-item">
                        <div class="chapter-header">
                            <div class="chapter-title">
                                <span class="chapter-number">第1章：</span>
                                <input type="text" class="chapter-name" value="课程介绍" placeholder="请输入章节名称">
                            </div>
                            <div class="chapter-actions">
                                <button class="add-video-btn">+ 添加视频</button>
                                <button class="edit-btn">✎</button>
                                <button class="delete-btn">×</button>
                            </div>
                        </div>
                        <div class="chapter-content">
                            <div class="video-list">
                                <div class="video-upload">
                                    <input type="file" class="video-file" accept="video/*" style="display: none;">
                                    <div class="upload-hint">
                                        <i class="upload-icon">📤</i>
                                        <span>点击上传视频</span>
                                    </div>
                                    <div class="upload-progress" style="display: none;">
                                        <div class="progress-bar"></div>
                                        <span class="progress-text">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 讲师信息 -->
            <div class="card">
                <h3 class="card-title">讲师信息</h3>
                <div class="form-group">
                    <label>选择讲师</label>
                    <select>
                        <option value="">张老师</option>
                    </select>
                </div>
                <div class="teacher-profile">
                    <img src="img/toux.png" alt="讲师头像" class="teacher-avatar">
                    <p class="teacher-desc">
                        资深前端开发工程师，具有10年+工作经验，教授超千名学员实现就业和能力提升。擅长Vue.js、React等前端框架的开发及性能优化。
                    </p>
                </div>
            </div>

            <!-- 底部按钮 -->
            <div class="form-actions">
                <button class="btn-draft">保存草稿</button>
                <button class="btn-publish">发布课程</button>
            </div>
        </div>
    </div>
	<script src="js/thearlogin.js"></script>
    <script src="js/addcourse.js"></script>
	<script src="js/publishcourse.js"></script>
</body>

</html>